import { useNavigate } from 'react-router-dom'
import style from './index.module.css'
import img6 from './img/image.png'
import { useEffect, useState } from 'react'
import axios from 'axios'
import Nabar from '@/conpoment/Nabar'

function Index() {
  const nav = useNavigate()
    const [list, setList] = useState<any[]>([])
    const getList = async () => {
        axios.get('/api/user/list').then(res => {
            setList(res.data.data)
        }).catch(error => {
            console.error('API请求失败:', error);
        })
    }
    useEffect(() => {
        getList()
    }, [])
  return (
    <div className={style.page}>
      {/* 导航栏 */}
    <Nabar title='家庭管理' />

      {/* 主要内容区域 */}
      <div className={style.content}>
            {/* 家庭成员卡片 */}
            {
                list.slice(-2).map((item,index)=>{
                    return <div 
                        key={index} 
                        className={style.memberCard}
                        onClick={() => {
                            // 创建一个简化的测试数据
                            const testData = {
                                id: item.id || index,
                                name: item.username || item.name || '测试姓名',
                                relation: item.userrelation || item.relation || '本人',
                                standing: item.userstanding || item.standing || '1234567890',
                                phone: item.phone || '13800138000',
                                sex: item.sex || '女',
                                age: item.age || '25',
                                birthday: item.birthday || '1998-01-01',
                                idType: item.idType || '居民身份证',
                                address: item.address || '北京市',
                                addressDetail: item.addressDetail || '朝阳区'
                            }
                            
                            // 将用户数据编码为URL参数
                            const userData = encodeURIComponent(JSON.stringify(testData))
                            nav(`/card_detail/${userData}`)
                        }}
                        style={{ cursor: 'pointer' }}
                    >
              <div className={style.memberInfo}>
                <div className={style.memberName}>{item.username} ({item.userrelation})</div>
                <div className={style.memberId}>登记号:{item.userstanding}</div>
              </div>
              <div className={style.qrCode}>
                <div className={style.qrIcon}><img src={img6} alt="" /></div>
              </div>
            </div>
                })
            }
        
      </div>

      {/* 底部添加按钮 */}
      <div className={style.bottomButton}>
        <button className={style.addButton} onClick={() => nav('/add_patient')}>添加</button>
      </div>
    </div>
  )
}

export default Index
